    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>结构型伪类</title>
    </head>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
            display: block;
            width: 510px;
            height: 360px;
            margin: 100px auto;
        }
        li{
            display: block;
            height: 70px;
            width: 70px;
            border: 1px solid rgba(122, 122, 122, 0.3);
            float: left;
            margin-top: -1px;
            margin-left: -1px;
            text-align: center;
            line-height: 70px;
            font-size: 24px;
            font-family: "Microsoft YaHei UI";
        }
        li:nth-child(2n+1){
            background-color: rgba(255, 61, 71, 0.92);
        }
        li:nth-child(7n),li:nth-child(7n-1){
            background-color: #fef71f;
        }

    </style>
    <body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <li>14</li>
        <li>15</li>
        <li>16</li>
        <li>17</li>
        <li>18</li>
        <li>19</li>
        <li>20</li>
        <li>21</li>
        <li>22</li>
        <li>23</li>
        <li>24</li>
        <li>25</li>
        <li>26</li>
        <li>27</li>
        <li>28</li>
        <li>29</li>
        <li>30</li>
        <li>31</li>
        <li>32</li>
        <li>33</li>
        <li>34</li>
        <li>35</li>
    </ul>
    </body>
    </html>